<template>
  <view v-if="Object.keys(detailInfo).length !== 0" class="goods-info">
	<view class="info-desc clear-fix">
	  <view class="start">
	  </view>
	  <view class="desc">{{detailInfo.desc}}</view>
	  <view class="end"></view>
	</view>
	<view class="info-key">{{detailInfo.detailImage[0].key}}</view>
	<view class="info-list">
		<image v-for="(item, index) in detailInfo.detailImage[0].list" :key="index" :src="item" @load="imgLoad" lazy-load="true"></image>
	</view>
  </view>
</template>

<script>
	export default {
		props: {
		  detailInfo: {
			type: Object
		  }
		},
		data() {
			return {
				conuter:0,
				imagesLenth:0
			}
		},
		methods: {
			imgLoad(){
				if(++this.conuter===this.imagesLenth){
					this.$emit('goodsinfoimage')
				}
			}
		},
		watch:{
			detailInfo(){
				this.imagesLenth=this.detailInfo.detailImage[0].list.length
			}
		}
	}
</script>

<style scoped>
  .goods-info {
    padding: 40rpx 0;
    border-bottom: 10rpx solid #f2f5f8;
  }

  .info-desc {
    padding: 0 30rpx;
  }

  .info-desc .start, .info-desc .end {
    width: 180rpx;
    height: 2rpx;
    background-color: #a3a3a5;
    position: relative;
  }

  .info-desc .start {
    float: left;
  }

  .info-desc .end {
    float: right;
  }

  .info-desc .start::before, .info-desc .end::after {
    content: '';
    position: absolute;
    width: 10rpx;
    height: 10rpx;
    background-color: #333;
    bottom: 0;
  }

  .info-desc .end::after {
    right: 0;
  }

  .info-desc .desc {
    padding: 30rpx 0;
    font-size: 28rpx;
  }

  .info-key {
    margin: 20rpx 0 20rpx 30rpx;
    color: #333;
    font-size: 30rpx;
  }

  .info-list image {
    width: 750rpx;
	height: 563rpx;
  }
</style>
